<template>
	<!-- 角色列表页面 -->
	<echelon-solutions>
		<!-- 这里是顶部导航栏 -->
		<skyline-navigation title="操作日志"> </skyline-navigation>
		<!-- 这里是中间区域 -->
		<central-hub>
			<view style="padding: 5px;box-sizing: border-box;" class="flex-column flexGap">
				<my-input placeholder="搜索相关内容" @input="input" v-model="search" />
				<MyTreeTable :columns="columnsData" :dataSource="getFilterRecord" style="zoom: .7;">
					<template #operate="{ data }">
						<view class="flexGap">
							<button type="primary" @click="detail(data)">详情</button>
							<button type="warn" @click="handleDelete(data)">删除</button>
						</view>
					</template>
				</MyTreeTable>
				<MyPopup v-model="ail.visible">
					<textarea class="convert-textarea" v-model="ail.value"></textarea>
				</MyPopup>
			</view>
		</central-hub>
	</echelon-solutions>
</template>

<script>
	export default {
		methods: {
			detail(data) {
				this.ail.visible = true;
				this.ail.value = data.remark.replace(/,|\+/g, match => match + '\n');
				this.ail.form = data;
			},
			// 删除
			handleDelete(data) {
				this.$removePublic('operation_record', data, async () => {
					this.tableData = await this.$listPublic('operation_record');
				});
			},
		},
		onLoad() {
			this.$listPublic('operation_record', {}, (data) => {
				this.tableData = data;
			});

		},
		computed: {
			getFilterRecord() {
				return this.tableData.filter(it => this.search ? JSON.stringify(it).includes(this.search) : true)
			}
		},
		data() {
			return {
				ail: {
					visible: false,
					value: '',
					form: null
				},
				search: '', // 搜索相关内容
				servers: [],
				popupVisible: false,
				updateVisible: false,
				updateFormFields: [],
				columnsData: [{
						title: 'ID',
						key: 'id',
						fixed: 'left',
					},

					{
						title: '账号',
						key: 'account'
					},
					{
						title: '用户名',
						key: 'username'
					},
					{
						title: '操作人员',
						key: 'operator'
					},
					{
						title: '描述',
						key: 'description'
					},

					// {
					// 	title: '备注',
					// 	key: 'remark'
					// },
					{
						title: '操作',
						key: 'operate',
						fixed: '',
					}
				],
				tableData: []
			}
		}
	}
</script>
<style scoped>
	.w30 {
		width: 30%;
	}

	.convert-textarea {
		width: 100%;
		/* 宽度占满容器，也可以根据需要设置为固定值 */
		height: 70vh;
		/* 高度，根据需要调整 */
		padding: 10px;
		/* 内边距 */
		box-sizing: border-box;
		/* 确保宽度包含内边距 */
		border: 2px solid #ccc;
		/* 边框颜色 */
		border-radius: 8px;
		/* 圆角 */
		background-color: #f8f8f8;
		/* 背景色 */
		color: #333;
		/* 文字颜色 */
		font-family: Arial, sans-serif;
		/* 字体 */
		font-size: 16px;
		/* 字号 */
		resize: vertical;
		/* 允许垂直调整大小 */
		transition: border-color 0.3s;
		/* 过渡动画 */
		box-sizing: border-box;
	}

	.convert-textarea:focus {
		border-color: #0066cc;
		/* 获得焦点时的边框颜色 */
		outline: none;
		/* 移除焦点时的默认轮廓线 */
	}
</style>